<template>
    <div class="tech-shop-prefecture">
        <Row class="content" gutter="16" v-if="goodsList.length > 0">
            <Col span="12" v-for="(item, index) in goodsList" :key="index + '-list-item'">
                <GoodsListItem :itemInfo="item" :isBrand="true" @addToBag="addToBag" />
            </Col>
        </Row>
        <Empty v-else msg="暂无数据" :isFullPage="true" :isTransparent="true" />
        <ChooseGoods
            v-if="goodsDetail"
            ref="choose"
            :info="goodsDetail"
            :isOnlySelect="false"
            :isChangeSku="false"
            :isAddBag="true"
            :isNowBuy="false"
            @ensure="ensureChoose"
        />
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { Row, Col } from 'vant';
import { Empty } from '@components/base';
import GoodsListItem from './components/GoodsListItem';
import ChooseGoods from './components/ChooseGoods';
import { setTitle } from '@common/utils';
import { TipSuccess } from '@common/tip';
import logger from '@common/logger';
import EventBus from '@common/eventBus';
import { PageMixin } from '@common/mixin';
import { getBrandNameCookie } from '@biztools/info';

export default {
    name: 'Prefecture',
    mixins: [PageMixin],
    components: {
        Row,
        Col,
        GoodsListItem,
        ChooseGoods,
        Empty,
    },
    data() {
        return {
            goodsDetail: null,
        };
    },
    computed: {
        ...mapState({
            goodsList: state => state.prefecture.goodsList,
            storeInfo: state => state.special.storeInfo,
        }),
    },
    async created() {
        const { goodsIds, title, storeId } = this.$route.query;
        setTitle(title);
        logger.debugger('Prefencture => 页面参数为', goodsIds, title);
        await this.getPrefectureGoodsList({ ids: goodsIds ? goodsIds.split(',') : [], storeId: parseInt(storeId) || 0 });
    },
    methods: {
        ...mapActions([
            'getPrefectureGoodsList',
            'addShopBagItem',
        ]),
        async addToBag(item) {
            logger.success('Prefecture => 获取的商品详情为：', item);
            this.goodsDetail = item;
            setTimeout(() => {
                this.$refs.choose.show();
            }, 50);
        },
        async ensureChoose(skuInfo) {
            logger.info('Prefecture => 选择的商品规格为', skuInfo);
            const item = {
                prod_id: this.goodsDetail.id,
                sku_id: skuInfo.id,
                quantity: skuInfo.quantity,
                store_id: this.storeInfo ? this.storeInfo.id : 0,
                store_name: this.storeInfo ? this.storeInfo.name : getBrandNameCookie(),
            };
            const flag = await this.addShopBagItem(item);
            if (flag) {
                TipSuccess('加入购物车成功');
                EventBus.$emit('RefreshBagData');
            }
        },
    },
};
</script>

<style lang="less">
.tech-shop-prefecture {
    .p(@gap-md);
    background-color: @white;
    min-height: 100vh;
}
</style>
